<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>车享乐-注册</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
	<link rel="stylesheet" href="../../static/layui/css/layui.css">
	<script src="../../static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../static/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.logo img {
			position: absolute;
			left: 50px;
			top: 0;
		}
		body {
			background: url(../../static/pic/login-bg.jpg) no-repeat center;
			background-size: cover;
			display: flex;
			justify-content: flex-end; /* Align form to the right */
			align-items: center; /* Center form vertically */
			height: 100vh; /* Full viewport height */
			margin: 0;
		}
		.form-container {
			width: 25%; /* Adjust width as needed */
			padding: 20px;
			background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
			box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
			border-radius: 8px;
			margin-right: 250px; /* Right margin */
		}
		.layui-form-item {
			margin-bottom: 12px;
		}
		.layui-btn {
			background-color: #5FB878; /* Custom button color */
		}
		h2 {
			font-family: 'Arial', sans-serif; /* Specify font-family */
			color: #333; /* Text color */
			font-size: 24px; /* Font size */
			margin-bottom: 20px; /* Add margin below h2 */
			text-align: center;
		}
		.ok{
			color: green;
		}
		.error{
			color: red;
		}
	</style>
</head>
<body>
	<div class="logo">
		<img src="../../static/pic/xx-logo.png" alt="">
	</div>
	<div class="form-container">
		<form class="layui-form" action="/user?method=register" method="post">
			<h2>用户注册</h2>
			<br>
			<div class="demo-reg-container">
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-username"></i>
						</div>
						<input type="text" name="username" id="username" lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input" onblur="checkUsername()">
					</div>
					<span id="usernameMsg"></span>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-note"></i>
						</div>
						<input type="text" name="account" id="account" lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input" onblur="checkAccount()">
					</div>
					<span id="accountMsg"></span>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-password"></i>
						</div>
						<input type="text" name="password" id="password" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" onblur="checkPassword()">
					</div>
					<span id="passwordMsg"></span>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-password"></i>
						</div>
						<input type="password" name="confirmPassword" id="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye" onblur="checkConfirmPassword()">
					</div>
					<span id="confirmPasswordMsg"></span>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-cellphone"></i>
						</div>
						<input type="text" name="phone" id="phone" lay-verify="phone" placeholder="手机号" autocomplete="off" class="layui-input" onblur="checkPhone()">
					</div>
					<span id="phoneMsg"></span>
				</div>
				<div class="layui-form-item">
					<input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
					<a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
						<ins>用户协议</ins>
					</a>
				</div>
				<div class="layui-form-item">
					<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">注册</button>
					<%--            <input type="submit" value="注册">--%>
				</div>
				<div class="layui-form-item demo-reg-other">
					<label>社交账号注册</label>
					<span style="padding: 0 21px 0 6px;">
						<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
						<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
						<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
					</span>
					<a href="/login.jsp">登录已有帐号</a>
				</div>
			</div>
		</form>
	</div>

	<script>
		function checkUsername () {
			var username = $('#username').val();
			var regex = /^[\u4e00-\u9fa5a-zA-Z0-9_]{1,10}$/;
			if (regex.test(username)) {
				$('#usernameMsg').html('该用户名格式正确');
				$('#usernameMsg').removeClass();
				$('#usernameMsg').addClass('ok');
			} else {
				$('#usernameMsg').html('1-10位的汉字、字母、数字、下划线');
				$('#usernameMsg').removeClass();
				$('#usernameMsg').addClass('error');
			}
		};
		function checkAccount () {
			var account = $('#account').val();
			var regex = /[a-zA-Z0-9_]{5,10}/;
			if (regex.test(account)) {
				$('#accountMsg').html('该账号格式正确');
				$('#accountMsg').removeClass();
				$('#accountMsg').addClass('ok');
			} else {
				$('#accountMsg').html('5-10位的字母、数字、下划线');
				$('#accountMsg').removeClass();
				$('#accountMsg').addClass('error');
			}
		};
		function checkPassword () {
			var password = $('#password').val();
			var regex = /^[\S]{6,16}$/;
			if (regex.test(password)) {
				$('#passwordMsg').html('该密码格式正确');
				$('#passwordMsg').removeClass();
				$('#passwordMsg').addClass('ok');
			} else {
				$('#passwordMsg').html('密码必须为 6 到 16 位的非空字符');
				$('#passwordMsg').removeClass();
				$('#passwordMsg').addClass('error');
			}
		};
		function checkConfirmPassword () {
			var confirmPassword = $('#confirmPassword').val();
			var regex = /^[\S]{6,16}$/;
			if (regex.test(confirmPassword)) {
				$('#confirmPasswordMsg').html('该密码格式正确');
				$('#confirmPasswordMsg').removeClass();
				$('#confirmPasswordMsg').addClass('ok');
			} else {
				$('#confirmPasswordMsg').html('密码必须为 6 到 16 位的非空字符');
				$('#confirmPasswordMsg').removeClass();
				$('#confirmPasswordMsg').addClass('error');
			}
		};
		function checkPhone () {
			var phone = $('#phone').val();
			var regex = /^\d{7,15}$/;
			if (regex.test(phone)) {
				$('#phoneMsg').html('该电话号码格式正确');
				$('#phoneMsg').removeClass();
				$('#phoneMsg').addClass('ok');
			} else {
				$('#phoneMsg').html('电话号码必须为 7 到 15 位的非空数字');
				$('#phoneMsg').removeClass();
				$('#phoneMsg').addClass('error');
			}
		};
		layui.use(function(){
			var $ = layui.$;
			var form = layui.form;
			var layer = layui.layer;
			var util = layui.util;

			// 自定义验证规则
			form.verify({
				// 确认密码
				confirmPassword: function(value, item){
					var passwordValue = $('#reg-password').val();
					if(value !== passwordValue){
						return '两次密码输入不一致';
					}
				}
			});

			// 提交事件
			form.on('submit(register)', function(data){
				var field = data.field; // 获取表单字段值

				// 是否勾选同意
				if(!field.agreement){
					layer.msg('您必须勾选同意用户协议才能注册');
					return false;
				}
				$.post(
						'/user?method=register',
						field,
						function (result) {
							console.log(result);
							if (result.code == 0) {
								mylayer.okUrl(result.msg, '/login.jsp');
							} else {
								mylayer.errorMsg(result.msg);
							}
						},
						'json'
				);
				// 显示填写结果，仅作演示用
				// layer.alert(JSON.stringify(field), {
				//     title: '当前填写的字段值'
				// });

				return false; // 阻止默认 form 跳转
			});

		});
	</script>
</body>
</html>